<template>
  <el-dialog
    class="custom-dialog"
    width="50%"
    append-to-body
    :visible.sync="isVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <span slot="title" class="dialog-title">
      {{ title }}
    </span>
    <div
      style="
        text-align: right;
        margin-top: -30px;
        padding-bottom: 5px;
        color: #409eff;
        margin-right: 50px;
      "
    >
      <i class="iconfont icon-diliweizhi1" />
      {{ deviceLocation }}
    </div>
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @ready="initMap"
    >
      <!-- 地图视图 -->
      <bm-view :style="{ width: '100%', height: mapHeight, flex: 1 }" />
      <!--缩放控件-->
      <bm-navigation
        anchor="BMAP_ANCHOR_TOP_RIGHT"
        type="BMAP_NAVIGATION_CONTROL_ZOOM"
        :offset="{ width: 8, height: 40 }"
      />

      <!--地图类型控件-->
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_RIGHT"
      />

      <!-- 设备点 -->
      <bm-marker
        :position="devicePoint"
        :icon="deviceIcon"
        :offset="{ width: 0, height: -10 }"
        animation="BMAP_ANIMATION_BOUNCE"
      >
        <bm-label
          :content="deviceObj.deviceName"
          :label-style="{
            backgroundColor: 'rgba(40, 40, 40, 0.7)',
            color: 'white',
            fontSize: '13px',
            borderRadius: '5px',
            borderColor: '#ccc',
            padding: '5px 10px',
          }"
          :offset="{ width: -35, height: 38 }"
        />
      </bm-marker>
      <!-- <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :show-address-bar="true"
        :auto-location="true"
      /> -->
      <!-- <bm-local-search
        :keyword="addressKeyword"
        :auto-viewport="true"
        style="display: none"
      /> -->
    </baidu-map>

    <span slot="footer" class="dialog-footer">
      <el-button
        v-if="listType != '查看详情'"
        type="primary"
        size="mini"
        @click="toConfirm"
      >
        确定
      </el-button>
      <el-button size="mini" @click="isVisible = false">
        {{ listType != '查看详情' ? '取消' : '关闭' }}
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  BaiduMap,
  BmView,
  BmNavigation,
  BmMapType,
  // BmGeolocation,
  // BmControl,
  BmMarker,
  BmLabel,
  // BmInfoWindow,
  // BmLocalSearch,
  // BmAutoComplete,
} from 'vue-baidu-map'
export default {
  name: 'DeviceMap',
  components: {
    BaiduMap, // 地图容器
    BmView, // 地图视图
    BmNavigation, // 缩放控件
    BmMapType, // 地图类型控件
    // BmGeolocation, // 定位控件
    // BmControl, // 自定义控件
    BmMarker, // 点
    BmLabel, // 标签
    // BmInfoWindow, // 信息窗体
    // BmLocalSearch, // 地区检索
    // BmAutoComplete, // 自动填充
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    deviceLocation: {
      type: String,
      default: '',
    },
    maxHeightDialog: {
      type: String,
      default: '',
    },
    listType: {
      type: String,
      default: '',
    },
    deviceObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      zoom: 17,
      center: { lng: this.deviceObj.longitude, lat: this.deviceObj.latitude },
      map: null,
      devicePoint: {
        lng: this.deviceObj.longitude,
        lat: this.deviceObj.latitude,
      },
      deviceIcon: {
        url: require('@/assets/map/device-1.png'),
        size: { width: 35, height: 35 },
      },
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
    mapHeight() {
      return this.maxHeightDialog.split('px')[0] * 0.6 + 'px'
    },
    inputLocationValue() {
      console.log('deviceLocation', this.deviceLocation)
      return this.deviceLocation
    },
  },

  created() {},
  mounted() {
    console.log(this.deviceObj, '地图数据')
  },
  methods: {
    initMap({ BMap, map }) {
      // console.log('BMap：', BMap + '；' + 'map：', map)
      this.map = map
      this.map.setMapStyle({ style: 'normal' })

      // const geolocation = new BMap.Geolocation()
      // geolocation.getCurrentPosition((res) => {
      //   console.log('定位结果：',res)
      // })

      // this.getDevicePoint()
    },
    // getDevicePoint() {
    //   this.$get('http://api.map.baidu.com/geocoder/v2/', {
    //     ak: 'o5TS61Nkhmnga4NTQd0Bj052lxzST8bo',
    //     output: 'json',
    //     address: this.deviceLocation
    //   }).then(res => {
    //     console.log('res：', res)
    //     if (res.status === 200) {
    //       const result = res.data.result
    //       this.devicePoint = result.location
    //       this.center = result.location

    //       // const pointArray = []
    //       // pointArray.push(this.devicePoint)
    //       // console.log('pointArray：',pointArray)
    //       // var view = this.map.getViewport(pointArray)
    //       // var mapZoom = view.zoom
    //       // var centerPoint = view.center
    //       // console.log('mapZoom：',mapZoom+'；'+'centerPoint：',centerPoint)
    //       // this.zoom = mapZoom
    //       // this.center = centerPoint
    //     } else {
    //       this.$message({
    //         message: '找不到该设备位置！',
    //         type: 'warning',
    //         duration: 4000
    //       })
    //     }
    //   })

    //   // const myGeo = new BMap.Geocoder()
    //   // myGeo.getPoint(this.deviceLocation, (point) => {
    //   //   console.log('point=', point)
    //   //   if (point) {
    //   //     this.devicePoint = point
    //   //     this.center =point

    //   //     // myGeo.getLocation(point, (rs) => {
    //   //     //   console.log('rs：', rs)
    //   //     // })
    //   //   } else {
    //   //   }
    //   // })
    // },
    toClose() {
      this.$emit('close')
    },
    toConfirm() {
      this.$emit('confirm')
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-title {
  font-size: 18px;
  color: #303133;
}
.el-button--mini {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
}
.custom-dialog >>> .el-dialog {
  box-shadow: 0 0 20px #629bf7;
}

// /deep/ .anchorBL,
// /deep/ .BMap_cpyCtrl {
//   display: none;
// }

// /deep/ .BMap_bubble_title {
//   color: white;
//   font-size: 13px;
//   font-weight: bold;
//   text-align: left;
//   padding-left: 5px;
//   padding-top: 5px;
//   border-bottom: 1px solid gray;
//   background-color: #0066b3;
// }
// /* 消息内容 */
// /deep/ .BMap_bubble_content {
//   background-color: rgba(40, 40, 40, 0.8);
//   padding-left: 5px;
//   padding-top: 5px;
//   padding-bottom: 10px;
//   border-bottom-left-radius: 8px;
//   border-bottom-right-radius: 8px;
// }
// /* 内容 */
// /deep/ .BMap_pop div:nth-child(9) {
//   top: 35px !important;
//   border-radius: 7px;
// }

// /deep/ .BMap_pop div:nth-child(5) {
//   display: none;
// }
// /* 左上角删除按键 */
// // /deep/ .BMap_pop img {
// //   // top: 43px !important;
// //   // left: 215px !important;
// //   display: none;
// // }

// /deep/ .BMap_top {
//   display: none;
// }

// /deep/ .BMap_bottom {
//   display: none;
// }

// /deep/ .BMap_center {
//   display: none;
// }
// /* 隐藏边角 */
// /deep/ .BMap_pop div:nth-child(1) div {
//   display: none;
// }

// /deep/ .BMap_pop div:nth-child(3) {
//   display: none;
// }

// /deep/ .BMap_pop div:nth-child(7) {
//   display: none;
// }
</style>
